<!--
 * @Author: caozaihui 15908754730@163.com
 * @Date: 2024-06-14 00:47:40
 * @LastEditors: caozaihui 15908754730@163.com
 * @LastEditTime: 2024-06-19 15:28:33
 * @FilePath: \YMU_forum\src\views\Register\components\Step1.vue
 * @Description: 注册步骤2
-->
<script setup>
import { TopRight, MagicStick } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import {useAccountStore} from "@/stores/useAccountStore";
import { onMounted,ref } from 'vue';
import {register2} from "@/apis/login";
const accountStore = useAccountStore();
const router = useRouter();
const msg = ref('')
onMounted(() => {
    if (accountStore.getAccount().data== undefined) { 
        console.log("未注册")
        router.push({
            path: '/'
        })
}})
const registerPara = ref({
    uid:'',
    mobile:'',
    email:''
})
const nextStep = () => {
    registerPara.value.uid = accountStore.getAccount().data.user.uid
    console.log(registerPara.value)
    register2(registerPara.value).then(res=>{
        if(res.code!='0'){
            msg.value = res.msg
        }else{
            router.push({
            path: '/register/3'
            })
        }

    })
}

</script>

<template>
    <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
        <h1 style="margin-top: 70px;margin-bottom: 10px;">增进彼此了解</h1>
        <el-tag effect="dark" round type="success">步骤2 联系方式</el-tag>
        <el-card class="box-card">
            <div class="card-header">
                <img style="height: 60px;" src="@/assets/imgs/login_mini.png">
            </div>
            <div style="margin-top: 30px;">
                <el-text>你的邮箱</el-text>
                <el-input class="input" v-model="registerPara.email" placeholder="设置邮箱">
                    <template #prepend>
                        <el-icon>
                            <TopRight />
                        </el-icon>
                    </template>
                </el-input>
                <el-text>你的电话</el-text>
                <el-input class="input" v-model="registerPara.mobile"  placeholder="设置电话">
                    <template #prepend>
                        <el-icon>
                            <TopRight />
                        </el-icon>
                    </template>
                </el-input>
                <el-text type="danger" style="margin-left: 15px;">{{ msg }}</el-text>
                <!-- 下一步 -->
                <div style="text-align:center;margin-top: 40px;">
                    <el-button-group>
                        <el-button type="primary" @click="nextStep" size="large">下一步
                            <el-icon style="margin-left: 10px;" size="20">
                                <MagicStick />
                            </el-icon>
                        </el-button>
                    </el-button-group>
                </div>
            </div>
        </el-card>
    </div>
</template>

<style scoped>
.input {
    margin-top: 5px;
    height: 38px;
    width: 100%;
    margin-bottom: 20px;
}

.img {
    height: 50px;
    margin-top: 20px;
    margin-left: 10px;
}

.card-header {
    display: flex;
    justify-content: center;
    align-items: center;
}


.box-card {
    margin-top: 10px;
    margin-left: 0;
    width: 340px;
    height: 410px;
    border-radius: 15px;
}
</style>